<template>
	<div class="DepartmentDistribute">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
	        	<div class="widget-body am-fr">
	        		<div class="am-u-sm-12 am-form ">
						<div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
				            <div class="am-form-group">
				            	<input type="text" name="name" v-model="query.name" placeholder="请输入用户名"/>
				            </div>
				        </div>
						<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-u-end">
				            <div class="am-form-group">
				            	<button type="button" class="am-btn am-btn-default am-btn-success"
				                      @click="search" ><span class="am-icon-search"></span>&nbsp;查询
				            	</button>
				            </div>
				        </div>
			        </div>

			        <div class="am-u-sm-12">
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              empty-text="暂无数据"
			              style="min-width: 100%">
			              <el-table-column
			                prop="username"
			                label="用户名"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="姓名"
			                prop="realName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="电话号码"
			                prop="phoneNo"
			                width="150">
			              </el-table-column>
			              <el-table-column
			                label="所属部门"
			                prop="departmentName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="操作"
			                width="150">
			                <template scope="scope">
			                  <el-button size="small" @click.native="showEdit(scope.row.userId,scope.row.userDepartmentId)">编辑</el-button>
			                </template>
			              </el-table-column>
			            </el-table>
			        </div>
			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize" @paging="askForUserList" />
			            </div>
			        </div>

					<el-dialog
					  title="提示"
					  :visible.sync="dialogVisible"
					  width="30%"
					  :before-close="handleClose">
					  	<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
				     		<div class="widget am-cf">
			        			<el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-form-group selector"
		                                v-model="areaTeamId" @change="askForAreaDepartMent" placeholder="请选择区域">
		                            <el-option
		                                v-for="item in areaTeams"
		                                :key="item.value"
		                                :label="item.text"
		                                :value="item.value">
		                            </el-option>
		                        </el-select>

								<el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-form-group selector"
		                                v-model="formData.departmentId" clearable placeholder="请选择部门">
		                            <el-option
		                                v-for="item in department"
		                                :key="item.departmentId"
		                                :label="item.departmentName"
		                                :value="item.departmentId">
		                            </el-option>
		                        </el-select>
							    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 save-wrap">
							    	<el-button type="primary" @click="updataDepartMent">保 存</el-button>
							    </div>
					        </div>
				        </div>
					</el-dialog>
		        </div>
	        </div>
        </div>
	</div>
</template>
<script>
	import io from '../../lib/io'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return{
				tableData:[],
		        total:0,
		        pageSize:10,
		        pageNo:1,
		        query:{
		        	name: ''
		        },
		        areaTeamId: '',
		        formData:{
		        	departmentId: '',
		        	userId: '',
		        	userDepartmentId: '',
		        },
		        dialogVisible: false,
		        department: [],
			}
		},
		components: {
	    	Pagination
	    },
	    computed:{
	    	areaTeams: function () {
		        var options = ( this.$root.config.areaTeams || [] )
		        	.map(function (item) {
		            	return {value: item.areaTeamId, text: item.name}
		        	})
		        return options
	    	},
	    },
	    created(){
	    	this.askForUserList();
	    },
		methods:{
			search(){
				this.askForUserList(1,{username: this.query.name});
			},
			showEdit(userId,userDepartmentId){
				// 刷新每次点击编辑进去的下拉框
				this.areaTeamId = '';
				this.formData.departmentId = '';
				this.department = [];

				this.formData.userId = userId;
				this.formData.userDepartmentId = userDepartmentId;
				this.dialogVisible = true
			},
			handleClose(){
				this.dialogVisible = false
			},
			// 用户列表
			askForUserList(pageNo,query){
				this.pageNo = pageNo || this.pageNo || 1
				io.post(io.userDepartmentList,Object.assign({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				},query),(ret)=>{
					if(ret.success){
						this.tableData = ret.data.list
						this.total = ret.data.total
					}else{
						this.$alert(ret.desc)
					}
				})
			},
			// 区域部门
			askForAreaDepartMent(){
				this.formData.departmentId = '';
				io.post(io.findDepartmentList,{
					areaTeamId: this.areaTeamId
				},(ret)=>{
					if(ret.success){
						this.department = ret.data;
					}else{
						this.$alert(ret.desc)
					}
				})
			},
			// 更新部门
			updataDepartMent(){
				if(this.formData.departmentId == ''){
					this.dialogVisible = false;
					this.$alert('请选择部门！');
					return ;
				}
				io.post(io.saveOrUpdateUserDepartment,this.formData,(ret)=>{
					if(ret.success){
						this.dialogVisible = false;
						this.askForUserList(null,{username: this.query.name});
						this.$alert('更新成功！');
					}else{
						this.$alert(ret.desc)
					}
				})
			},
		}
	}
</script>
<style lang="less">
	.save-wrap{
		text-align: right;
		margin-top: 12px;
	}
	.selector{
	    padding-right: 0;
	    padding-left: 0;
	}
</style>